<template>
  <div class="box" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中"
    element-loading-background="rgba(255, 255, 255, 0.8)" style="position: relative;padding-bottom: 210px;">
    <transition name="el-fade-in">
      <div class="erweimaerweima" v-if="showForward" v-loading.lock="qrCodeLoading" element-loading-text="拼命加载中"
        element-loading-background="rgba(255, 255, 255, 0.8)">
        <img :src="qrCode" alt="" />
        <p>扫描分享到微信好友</p>
        <p>或微信朋友圈</p>
        <!-- <i
          class="el-icon-close"
          style="
            cursor: pointer;
            position: absolute;
            top: 3px;
            color: #000;
            font-size: 24px;
            right: 6px;
          "
          @click="yc()"
        ></i> -->
      </div>
    </transition>
    <transition name="el-fade-in">
      <div class="reward-popup" @click.self="rewardVisible = false" v-if="rewardVisible">
        <div class="reward-main">
          <div class="reward-top">
            <div class="reward-title">
              打赏
            </div>
            <i class="reward-close el-icon-close" style="" @click.stop="rewardVisible = false"></i>
            <img src="@/assets/v3/reward.png" alt="" srcset="" />
            <div class="reward-name">
              <!-- {{ s.userInfo.userName || s.userInfo.nikeName || "未命名用户" }} -->
            </div>
          </div>
          <div class="reward-operate">
            <div class="reward-operate-label">选择打赏金额</div>
            <div class="reward-operate-reminder">
              余额：
              <span>{{ balance.bangBangDouBalance || 0 }}帮帮豆</span>
            </div>
          </div>
          <div class="reward-list">
            <div @click="selectRewardPrice(item)" class="reward-item" v-for="(item, index) in rewardList" :class="[
              item.active ? 'active' : '',
              item.disabled ? 'disabled' : ''
            ]" :key="index">
              {{ item.quantity }}<span>帮帮豆</span>
            </div>
          </div>
          <div class="reward-input">
            <!-- @input="quantity = $event.detail.value.replace(/d/g, '')" -->
            <el-input type="Number" oninput="if (value.length > 6) value = value.slice(0, 6);" v-model.number="quantity"
              placeholder="输入打赏帮帮豆数量"></el-input>
          </div>
          <div class="reward-chat-title">
            留言：
          </div>
          <div class="reward-input">
            <el-input v-model="leaveAMessage" placeholder="请输入留言"></el-input>
          </div>

          <div class="reward-btn" :class="btnDisabled ? 'disabled' : ''" @click="determine">
            确定
          </div>
        </div>
      </div>
    </transition>

    <div v-show="!loading">
      <heads></heads>
      <secondHead showSearch></secondHead>
      <div style="min-height: calc(100vh - 420px);padding-bottom: 0px;">
        <div class="helpFriends" v-for="s in ceshiArr" :key="s.id">
          <div class="helpFriends_title">
            <div class="helpFriends_title_left">
              <img @click.stop="goUserDetail(s)" class="helpFriends_title_left_img" :src="s.userInfo && s.userInfo.image
                ? s.userInfo.image
                : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                " />
            </div>

            <div class="helpFriends_title_right" style="width: calc(1200px - 64px)">
              <div class="title_right_bottom" style="flex-direction: column">
                <div class="title_right_bottom" style="
                  color: #333;
                  font-size: 18px;
                  font-weight: 400;
                  color: #333333;

                  margin-bottom: 4px;
                " @click.stop="goUserDetail(s)">
                  {{
                    s.userInfo.userName || s.userInfo.nikeName || "未命名用户"
                  }}
                  <user-label :userInfo="s.userInfo" al="flex-start" style="margin-left:12px;">
                  </user-label>
                  <!-- <div class="jjr">
                    {{
                      s.userInfo.isAgent == 0
                        ? "个人用户"
                        : s.userInfo.isShop == 1
                        ? "商家"
                        : "经纪人"
                    }}
                  </div> -->
                </div>
                <div class="title_right_bottom" style="
                  font-size: 18px;
                  font-weight: 400;
                  color: #333333;

                ">
                  <div class="vip-level pointer" v-if="s.userInfo" :style="{
                    backgroundColor:
                      colors[s.userInfo.memberLevel - 1].bgColor,
                    color: colors[s.userInfo.memberLevel - 1].wordColor,
                    borderColor: colors[s.userInfo.memberLevel - 1].lineColor
                  }">
                    {{ s.userInfo.memberLevelTitle }}
                  </div>
                  <!-- <div style="color: #333;line-height: 30px;margin-left:12px;">
                    {{
                      s.createDate.split(" ")[0].split("-")[0] +
                        "年" +
                        s.createDate.split(" ")[0].split("-")[1] +
                        "月" +
                        s.createDate.split(" ")[0].split("-")[2] +
                        "日 " +
                        s.createDate.split(" ")[1]
                    }}

                  </div> -->
                </div>
              </div>
              <div class="title_right_top">
                <div>
                  <!-- <div
                    class="helpFriends_title_left_span"
                    style="cursor: pointer"
                  >
                    {{
                      s.userInfo.userName || s.userInfo.nikeName || "未命名用户"
                    }}
                  </div> -->
                  <div class="helpFriends_title_right" style="cursor: pointer; color: #333;padding-right: 15px;">
                    <div style="display: flex; align-items: center" v-if="s.whetherCollection != '1'"
                      @click="collect(s, true)">
                      <img style="width: 30px; height: 30px" src="../../assets/shou2.png" />
                      <span style="font-size: 18px; color: #333">收藏</span>
                    </div>
                    <div style="display: flex; align-items: center; cursor: pointer" @click="collect(s)" v-else>
                      <img style="width: 30px; height: 30px" src="../../assets/shou3.png" />
                      <span style="font-size: 18px; color: #333">已收藏</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="helpFriends_article">
            <div class="helpFriends_article_text">
              {{ s.content }}
              <!-- <packUpText :text="s.content" ></packUpText> -->
            </div>
          </div>

          <template v-if="s.picture">
            <div class="img_list">
              <template v-if="s.picture.length == 1">
                <template v-for="(i, j) in s.picture">
                  <el-image class="img_temp2" fit="cover" style="" :src="i" :preview-src-list="s.picture" :key="j">
                  </el-image>
                </template>
              </template>
              <template v-else>
                <template v-for="(i, j) in s.picture">
                  <el-image class="img_temp2" fit="cover" style="" :src="i" :preview-src-list="s.picture" :key="j">
                  </el-image>
                </template>
              </template>
            </div>
          </template>
          <div class="video" v-for="(i, j) in s.video" :key="j">
            <video :src="i" controls></video>
          </div>
          <div class="byq_new_address byq_add" @click.stop="addressopen" v-if="s.detailedAddress">
            <i class="el-icon-location-information"></i>{{ showNewAddress }}
          </div>
          <div class="byq_bottom" :style="s.picture.length == 1 ? '' : 'margin-top:0'">
            <div class="show-time">
              {{ showTime }}
            </div>
            <div class="byq_bottom_right">
              <div class="byq_bottom_right_item">
                <img class="byq_bottom_right_item_img" src="../../assets/bbcz/eye01.png" alt="" />
                <span>{{ s.views }}</span>
              </div>
              <div class="byq_bottom_right_item" @click.stop="goLike(s, 2)">
                <img style="transform: scale(1.2);" class="byq_bottom_right_item_img" src="../../assets/bbcz/dc01.png"
                  alt="" v-if="s.whetherThumbsDown == '0'" />
                <img style="transform: scale(1.2);" class="byq_bottom_right_item_img" src="../../assets/bbcz/dc02.png"
                  alt="" v-else />
                <span>{{ s.downThumb }}</span>
              </div>
              <div class="byq_bottom_right_item" @click.stop="goLike(s, 1)">
                <img class="byq_bottom_right_item_img" src="../../assets/bbcz/dz01.png" alt=""
                  v-if="s.whetherThumbsUp == '0'" />
                <img class="byq_bottom_right_item_img" src="../../assets/bbcz/dz02.png" alt="" v-else />
                <span>{{ s.upThumb }}</span>
              </div>

              <el-dropdown trigger="click" @command="handleClick">
                <span class="el-dropdown-link">
                  <div class="byq_bottom_right_item pointer">
                    <img class="byq_bottom_right_item_img" src="../../assets/bbcz/zf01.png" alt="" />
                    <span>{{ s.forwardingVolume }}</span>
                  </div>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">微信</el-dropdown-item>
                  <el-dropdown-item command="2">朋友圈</el-dropdown-item>
                  <el-dropdown-item command="3">复制链接</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div v-if="ceshiArr[0].auditStatus == 1" class="reward-wrap">
          <img @click="reward" src="@/assets/v3/reward.png" alt="" srcset="" style="width:114px;height:114px;" />
        </div>
        <p v-show="!loading" class="mzsm"
          style="box-sizing:border-box;margin-top:-30px;margin-bottom:30px;width:1200px;margin-left: 50%;transform: translateX(-50%);">
          {{ disclaimerContent }}
        </p>
      </div>

      <floor></floor>
    </div>
    <addressmap ref="addmap" key="mapKey" v-if="(ceshiArr[0] || {}).latitude"></addressmap>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import packUpText from "../index/comp/packUpText.vue";
import { wechatTimeFormat } from "@/utils/wxTime.js";
import addressmap from "@/components/addressMap.vue";

export default {
  components: {
    floor,
    heads,
    packUpText,
    addressmap
  },
  data() {
    return {
      colors: [
        {
          bgColor: "#E9EFEF",
          wordColor: "#60807D",
          lineColor: "#B6C4C3",
          level: "青铜会员"
        },
        {
          bgColor: "#F7F7F7",
          wordColor: "#A3AAB0",
          lineColor: "#D2D9E0",
          level: "白银会员"
        },
        {
          bgColor: "#FFF8DE",
          wordColor: "#CEAB21",
          lineColor: "#D3CAB2",
          level: "黄金会员"
        },
        {
          bgColor: "#EDFAFF",
          wordColor: "#59B0E6",
          lineColor: "#BBD0DB",
          level: "铂金会员"
        },
        {
          bgColor: "#F2F5FF",
          wordColor: "#284EB6",
          lineColor: "#C1CBEF",
          level: "钻石会员"
        },
        {
          bgColor: "#FDF7FF",
          wordColor: "#A877C6",
          lineColor: "#DBC6E8",
          level: "钻石Ⅰ会员"
        },
        {
          bgColor: "#F8F2FF",
          wordColor: "#78439F",
          lineColor: "#958AC3",
          level: "钻石Ⅱ会员"
        },
        {
          bgColor: "#F4F2F2",
          wordColor: "#8D4581",
          lineColor: "#907B8C",
          level: "钻石Ⅲ会员"
        },
        {
          bgColor: "#F4F2F2",
          wordColor: "#502E30",
          lineColor: "#795D5E",
          level: "王者会员"
        }
      ],
      rewardVisible: false,
      ceshiArr: [],
      id: "",
      housePage: {
        pageSize: 10,
        pageNo: 1
      },
      likeLoading: false,
      collectloading: false,
      loading: true,
      showForward: false,
      qrCode: "",
      qrCodeLoading: false,
      disclaimerContent: "",
      rewardList: [
        {
          value: 10
        },
        {
          value: 50
        },
        {
          value: 100
        },
        {
          value: 200
        },
        {
          value: 500
        },
        {
          value: 1000
        }
      ],
      rewardActive: 0,
      rewardValue: "",
      rewardChat: "",
      user: {},
      balance: { bangBangDouBalance: 0 },
      quantity: "",
      leaveAMessage: "",
      btnDisabled: false
    };
  },
  watch: {
    quantity(newV, oldV) {
      this.btnDisabled = Number(newV) > this.balance.bangBangDouBalance;
    }
  },
  computed: {
    showNewAddress() {
      if (this.ceshiArr.length == 0) return "";
      var reg = /(.*)省|([^市]*)市/g;
      var detailedAddress = this.ceshiArr[0].detailedAddress;
      var realAdd = "";
      var temp = [];
      while ((temp = reg.exec(detailedAddress))) {
        realAdd = temp[0];
      }
      return realAdd;
    },
    showTime() {
      if (this.ceshiArr.length == 0) return "";

      var createDate = this.ceshiArr[0].createDate;
      // console.log(wechatTimeFormat);
      return this.$time.getDateDiff(createDate);
    }
  },
  async created() {
    this.id = this.$route.query.id;
    await this.getBangbangdouReward();
    this.getUser();
    this.friendsCircle();
    this.checkLogin(true, this.updataViewNum);

    var that = this;
    window.addEventListener("click", function () {
      that.showForward = false;
    });
    this.getDisclaimers(1);
  },
  methods: {
    //选择位置-展示位置
    addressopen() {
      this.$refs.addmap.open(true, this.ceshiArr[0]);
    },
    // 打赏
    determine() {
      if (this.btnDisabled) return true
      if (this.user.id == this.userInfo.id) {
        this.myErrorMessage("该帮友圈是您发布的，无法打赏");
        return;
      }
      if (!this.quantity) {
        this.myErrorMessage("打赏帮帮豆不能为空");
        return false;
      }
      if (+this.quantity > this.balance.bangBangDouBalance) {
        this.myErrorMessage("打赏帮帮豆不能超过拥有数量");
        return false;
      }
      if (this.determineLoading) {
        return false;
      }
      this.determineLoading = true;
      this.$postHttp("/api/mobile/public/rewardBangbangdou", {
        rewarder: this.user.id,
        rewardee: this.userInfo.id,
        rewardQuantity: this.quantity,
        leaveMessage: this.leaveAMessage
      })
        .then(res => {
          this.mySuccessMessage(res.msg);
          this.getUserDou(() => {
            this.determineLoading = false;
            this.rewardVisible = false;
          });
        })
        .catch(err => {
          this.determineLoading = false;
        });
    },
    // 选择快捷的帮帮豆数量
    selectRewardPrice(item) {
      if (!item.disabled) {
        this.rewardList.map(item2 => {
          item2.active = false;
          if (item2.id == item.id) {
            item2.active = true;
            this.quantity = item2.quantity;
          }
        });
      }
    },
    // 根据用户ID获取帮帮豆余额
    getUserDou(cab) {
      return this.$getHttp("/api/mobile/public/getHelpfulBeanBalanceByUserId", {
        userId: this.user.id
      }).then(res => {
        this.rewardList.map(item => {
          // item.active = item.quantity <= res.userInformation.bangBangDouBalance;
          item.disabled =
            item.quantity > res.userInformation.bangBangDouBalance;
        });
        this.balance = res.userInformation;
        cab && cab();
      });
    },
    //
    getBangbangdouReward() {
      return this.$getHttp("/api/mobile/public/getBangbangdouReward").then(
        data => {
          console.log(data);
          data.bangbangdouReward.pageList.forEach(v => {
            v.active = false;
            v.disabled = false;
          });
          this.rewardList = data.bangbangdouReward.pageList;
          // this.qrCode = data.imagePath;
          // this.qrCodeLoading = false;
          // console.log(data.imagePath);
        }
      );
    },
    async reward() {
      if (this.getUser()) {
        if (this.user.id == this.userInfo.id || !this.userInfo.id) {
          this.myErrorMessage("该帮友圈是您发布的，无法打赏");
          return false
        }
        this.quantity = "";
        this.leaveAMessage = "";
        this.rewardList.map(item => {
          item.active = false;
          item.disabled = false;
        });
        // if (!this.balance.id) {
        await this.getUserDou();
        // }
        this.rewardVisible = true;
      } else {
        this.myErrorMessage("请先登录");
      }
    },
    goUserDetail(item) {
      var user = item.userInfo;
      if (user.businessType == 1) {
        this.goHouseAgentDetails(user);
      } else if (user.businessType == 2) {
        this.goVehicleAgentDetails(user);
      } else if (!user.businessType || user.businessType == 0) {
        this.openUrl({
          path: "/index/goldConsultant",
          query: {
            id: user.id
          }
        });
      }
    },
    handleClick(e) {
      console.log(e, this.s);

      if (e == 1) {
        //微信
        this.showForward = true;
        this.getImg(this.ceshiArr[0].id, "pages_owner/my/friendsCircleDetails");
      } else if (e == 2) {
        //朋友圈
        this.getImg(this.ceshiArr[0].id, "pages_owner/my/friendsCircleDetails");
        this.showForward = true;
      } else {
        //复制
        let oInput = document.createElement("input");
        // 将想要复制的值
        oInput.value = `${this.baseUrl}my/friendsCircleDetails?id=${this.$route.query.id}`;
        // 页面底部追加输入框
        document.body.appendChild(oInput);
        // 选中输入框
        oInput.select();
        // 执行浏览器复制命令
        document.execCommand("Copy");
        // 弹出复制成功信息
        this.mySuccessMessage("复制成功");
        // 复制后移除输入框
        oInput.remove();
      }
    },
    getImg(id, url) {
      this.qrCodeLoading = true;
      // console.log("getImggetImggetImggetImg=>", id, url);
      // return;
      this.$postHttp("/api/mobile/public/generateAppletQRCode", {
        id,
        url
      }).then(data => {
        console.log(data);
        this.qrCode = data.imagePath;
        this.qrCodeLoading = false;
        // console.log(data.imagePath);
      });
    },
    forward(s) {
      console.log("12e");
      this.showForward = true;
    },
    cancelForward() {
      this.showForward = false;
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
      } else {
        this.loginstate = false;
      }
      return user;
    },
    checkLogin(slience = false, callback) {
      if (!this.loginstate) {
        if (!slience) {
          this.$message({
            message: "请先登录！",
            type: "error",
            offset: 120,
            duration: 2000
          });
        }
        return false;
      }
      callback && callback();
      return true;
    },
    // 更新浏览记录
    updataViewNum() {
      if (this.ceshiArr[0].auditStatus == 1 && this.user.id !== this.ceshiArr[0].createBy) {
        this.$postHttp("/api/mobile/public/increaseBrowsingRecord", {
          browseRecordId: this.id,
          viewersId: JSON.parse(localStorage.getItem("userInfo")).id,
          businessType: 2,
          browsingRecords: 3
        }).then(res => { });
      }
    },
    // 获取帮友圈数据
    // 获取帮友圈数据
    friendsCircle() {
      this.$getHttp(
        "/api/mobile/vehicleOwner/queryHelpingFriendsCircleDetailsById",
        {
          id: this.id,
          userId: localStorage.getItem("userInfo")
            ? JSON.parse(localStorage.getItem("userInfo")).id
            : ""
        }
      ).then(data => {
        //auditStatus  string审核状态（0：待审核，1：已通过，2：已拒绝）
        if (data.code == 200) {
          var item = data.helpingFriendsCircleDetails;
          item.chage = 0;
          item.picture = this.manageImg(item.picture);
          item.imageList = this.manageImg(item.picture);
          item.video = this.manageImg(item.video);

          this.ceshiArr = [item];

          console.log("this.ceshiArr", this.ceshiArr);
          this.userInfo = item.userInfo;
          this.likeLoading = false;
          this.collectloading = false;
          setTimeout(() => {
            this.loading = false;
          }, 100);
        }
      });
    },
    // 关注
    collect(item, flag) {
      if (this.loginstate) {
        if (this.collectloading) {
          return;
        }
        this.collectloading = true;
        this.$postHttp(
          "/api/mobile/vehicleOwner/collectionOrCancelCollection",
          {
            collectorId: JSON.parse(localStorage.getItem("userInfo")).id,
            collectionType: 3,
            relationId: item.id,
            id:
              item.collectionAttention && item.collectionAttention.id
                ? item.collectionAttention.id
                : ""
          }
        ).then(data => {
          if (data.code == 200 && data.success) {
            this.friendsCircle();
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000
            });
            if (item.whetherCollection == 0) {
              this.addIntegral(5, "关注帮友圈");
            }
          } else {
            this.collectloading = false;
          }
        });
      } else {
        this.$message({
          message: "请登录之后再收藏！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    goLike(item, flag) {
      if (this.loginstate) {
        // 去关注
        var url;
        var type;
        if (flag == 1) {
          // 赞
          url = "/api/mobile/vehicleOwner/upperOrCancelThumb";
          type = 1;
        } else if (flag == 2) {
          // 踩
          url = "/api/mobile/vehicleOwner/downOrCancelThumb";
          type = 2;
        }
        var obj = {
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          circleId: item.id,
          type: type
        };
        item.likeRecord && item.likeRecord.id
          ? (obj.id = item.likeRecord.id)
          : "";

        if (flag == 1 && item.whetherThumbsUp != 1) {
          // 赞
          delete obj.id;
        } else if (flag == 2 && item.whetherThumbsDown != 1) {
          // 踩
          delete obj.id;
        }

        if (this.likeLoading) {
          return;
        }
        this.likeLoading = true;
        this.$postHttp(url, {
          // id: item.id,
          ...obj
        }).then(data => {
          if (data.code == 200 && data.success) {
            this.friendsCircle();
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000
            });
            if (item.whetherThumbsUp == 0) {
              this.addIntegral(6, "点赞");
            }
          } else {
            this.likeLoading = false;
          }
        });
      } else {
        this.$message({
          message: "请登录之后再点赞！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },

    //处理图片
    manageImg(imgs) {
      var arr = [];
      if (null != imgs) {
        if (imgs.indexOf("|") == -1) {
          if (imgs != "") {
            arr.push(imgs);
            console.log("imgs", arr);
            return arr;
          } else {
            return [];
          }
        } else {
          return imgs.split("|");
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.img_list,
.helpFriends_article,
.img_one,
.img_two,
.img_three,
.videovideo,
.byq_bottom,
.byq_new_address {
  padding-left: 64px;
}

.byq_new_address {
  cursor: pointer;
}

.reward-wrap {
  position: relative;
  margin: 80px 0 118px 0;
  display: flex;
  justify-content: center;

  img {}
}

.reward-popup {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  // background: #000000;
  border-radius: 0px 0px 0px 0px;
  // opacity: 0.7;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;

  .reward-main {
    width: 426px;
    height: 676px;
    overflow: hidden;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;

    .reward-top {
      position: relative;
      width: 100%;
      height: 212px;
      background: #64b6a8;
      border-radius: 10px 10px 60px 60px;
      opacity: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #ffffff;
      font-size: 24px;
      text-align: center;

      .reward-close {
        position: absolute;
        top: 12px;
        right: 12px;
        color: white;
        font-size: 26;
      }

      .reward-title {
        margin: 26px 0 16px 0;
        height: 34px;
        font-weight: 500;
        line-height: 28px;
      }

      img {
        width: 80px;
        height: 80px;
        background: #d9d9d9;
        border-radius: 50%;
        opacity: 1;
      }

      .reward-name {
        margin-top: 8px;
        height: 28px;
        font-size: 20px;
        font-weight: 500;
        line-height: 23px;
      }
    }

    .reward-operate {
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .reward-operate-label {
        height: 28px;
        font-size: 20px;
        font-weight: 400;
        color: #333333;
        line-height: 28px;
      }

      .reward-operate-reminder {
        height: 26px;
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        line-height: 26px;

        span {
          margin-left: 6px;
          color: #64b6a8;
        }
      }
    }

    .reward-list {
      padding: 0 22px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      text-align: center;

      .reward-item {
        width: 96px;
        height: 36px;
        background: transparent;
        border-radius: 19px 19px 19px 19px;
        opacity: 1;
        border: 1px solid #64b6a8;
        font-size: 20px;

        font-weight: 500;
        color: #64b6a8;
        margin-bottom: 20px;
        line-height: 36px;
        cursor: pointer;

        span {
          font-size: 12px;
        }

        &.active {
          color: #fff;

          background: #64b6a8;
        }

        &.disabled {
          color: #fff;

          background: #d1d1d1;
        }
      }
    }

    .reward-input {
      margin: 12px 22px;

      height: 42px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      // border: 1px solid #dcdcdc;
    }

    .reward-chat-title {
      padding-left: 22px;
      width: 60px;
      height: 28px;
      font-size: 20px;
      font-weight: 400;
      color: #333333;
      line-height: 28px;
      margin: 30px 0 6px 0;
    }

    .reward-btn {
      cursor: pointer;
      text-align: center;
      margin: 0 auto;
      margin-top: 32px;
      width: 200px;
      height: 40px;
      line-height: 40px;
      background: #64b6a8;
      border-radius: 6px 6px 6px 6px;
      opacity: 1;

      font-size: 20px;
      font-weight: 500;
      color: #ffffff;

      &.disabled {
        background: #d1d1d1;
      }
    }
  }
}

.byq_add {
  color: #ababab;
  // display: inline-block;
  // vertical-align: middle;
  height: 34px;
  font-size: 24px;
  font-weight: 400;
  color: #4b8db1;
  line-height: 34px;
  white-space: nowrap;
}

.show-time {
  color: #ababab;
  // padding-left: 15px;
  font-size: 14px;
}

.jjr {
  width: 58px;
  height: 22px;
  border-radius: 14px;
  border: 1px solid #64b6a8;
  font-size: 12px;
  font-weight: 400;
  color: #64b6a8;
  text-align: center;
  line-height: 20px;
  margin-left: 15px;
  box-sizing: border-box;
  margin-top: 2px;
}

.title-level {
  position: relative;
  margin-left: 14px;
  margin-right: 18px;
  padding: 0 2px;
}

.title_right_bottom {
  cursor: pointer;
  display: flex;
  // align-items: center;
  justify-items: center;
  // align-items: center;

  // flex-direction: column;
}

.box {
  position: relative;
  padding-bottom: 200px;
  overflow: hidden;
}

.tit {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
					height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      width: 400px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;
      vertical-align: middle;

      input {
        width: 320px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .download {
      width: 200px;
      height: 50px;
      background-color: #64b6a8;
      border-radius: 6px;
      color: #fff;
      text-align: center;
      line-height: 50px;
    }
  }
}

.helpFriends {
  width: 1200px;
  margin: 0 auto;
  margin-top: 50px;

  .helpFriends_title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .helpFriends_title_left {
      display: flex;
      align-items: center;

      .helpFriends_title_left_img {
        cursor: pointer;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        // overflow: hidden;
      }

      .helpFriends_title_left_span {
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        margin-left: 20px;
      }
    }

    .helpFriends_title_right {
      display: flex;
      // flex-direction: column;
      justify-content: space-between;
      align-items: center;

      // padding-right: 15px;
      .title_right_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .helpFriends_article {
    margin-top: 34px;

    .helpFriends_article_text {
      word-break: break-all;
      font-size: 18px;
      font-weight: 500;
      color: #333333;
      line-height: 30px;
    }

    .helpFriends_article_active {
      font-size: 26px;
      font-weight: 500;
      color: #333333;
      line-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
    }

    .unfold {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 26px;
      font-weight: 400;
      color: #64b6a8;

      span {
        cursor: pointer;
      }

      .unfold_img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }

    .unfold_yc {
      display: none;
    }
  }

  .img_one {
    width: 100%;
    height: 290px;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .img_two {
    width: 100%;
    height: 290px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 48%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .img_three {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 30%;
      height: 100%;
      border-radius: 8px;
      margin-bottom: 20px;
    }
  }

  .video {
    width: 100%;
    height: 290px;
    // margin-top: 30px;
    margin-top: 10px;
    margin-bottom: 15px;

    video {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }
}

.byq_bottom {
  display: flex;
  justify-content: space-between;
  // margin-top: 30px;
  margin-bottom: 50px;
  margin-top: 20px;
  align-items: center;

  .byq_bottom_right {
    display: flex;
    align-items: center;

    .byq_bottom_right_item {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 400;
      color: #333333;
      margin-right: 15px;

      .byq_bottom_right_item_img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }
}

.img_list {
  width: 100%;
  // min-height: 290px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .img_temp1 {
    // display: inline-block;
    height: 220px;
    // padding-bottom: 30%;
    max-width: 300px;
  }

  .img_temp2 {
    height: 220px;
    width: 260px;
    overflow: hidden;
    // padding: 0 40px;
    padding-right: 40px;
    box-sizing: border-box;
    margin-bottom: 40px;
    // padding-bottom: 300px;
  }
}

.vip-level {
  width: 72px;
  // margin: 0 auto;
  text-align: center;
  padding: 2px 0;

  border: 1px solid #bd90d9;
  border-radius: 4px 4px 4px 4px;
  font-size: 14px;
  background: #f6f0ff;
  font-weight: 500;
  color: #bd90d9;
  line-height: 24px;
}

.erweimaerweima {
  z-index: 999;
  box-sizing: border-box;
  // border: 5px solid red;
  border: 2px solid #64b6a8;
  // width: 320px;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999999;
  background-color: #ffffff;
  padding-bottom: 20px;
  border-radius: 5px;

  // display: flex !important;
  //   margin-right: 10px !important;
  img {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    padding: 40px;
  }

  span {
    color: #000;
  }

  p {
    line-height: 24px;
    color: #000;
  }

  div {
    margin-right: 10px !important;
    z-index: 99999;
    display: flex !important;
    flex-direction: column;
    align-items: center;

    img {
      width: 150px;
      height: 150px;
    }

    span {
      color: #000;
    }
  }
}
</style>
